<!-- 设备保养记录 -->
<template>
  <div class="maintenance-record">
    <TableTurn :table-data="getData" :args="args">
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>

      <a-table-column
        :width="150"
        align="center"
        title="保养单号"
        data-index="number"
      >
      </a-table-column>

      <a-table-column
        :width="150"
        align="center"
        title="设备名称"
        data-index="equipName"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="设备编码"
        data-index="equipNumber"
      >
      </a-table-column>
      <!-- <a-table-column :width="150" align="center" title="故障描述">
          <template #cell="{ record }">
            <a-button type="text" @click="goDetail(record, 2)">查看</a-button>
          </template>
        </a-table-column> -->

      <a-table-column :width="150" align="center" title="保养周期">
        <template #cell="{ record }">
          {{ `${record.maintenanceCycleNum}${record.maintenanceCycleUnit}` }}
        </template>
      </a-table-column>
      <a-table-column :width="150" align="center" title="保养到期预警">
        <template #cell="{ record }">
          {{ `${record.maintenanceWarning}${record.maintenanceCycleUnit}` }}
        </template>
      </a-table-column>

      <a-table-column
        :width="150"
        align="center"
        title="保养人员"
        data-index="maintenancePeopleName"
      >
      </a-table-column>
      <a-table-column :width="200" align="center" title="保养开始时间">
        <template #cell="{ record }">
          {{
            record.maintenanceStartTime === 0
              ? '-'
              : `${dayjs(record.maintenanceStartTime).format(
                  'YYYY-MM-DD HH:mm:ss'
                )}`
          }}
        </template>
      </a-table-column>

      <a-table-column :width="200" align="center" title="保养结束时间">
        <template #cell="{ record }">
          {{
            record.maintenanceEndTime === 0
              ? '-'
              : `${dayjs(record.maintenanceEndTime).format(
                  'YYYY-MM-DD HH:mm:ss'
                )}`
          }}
        </template>
      </a-table-column>
      <a-table-column :width="150" align="center" title="是否需要维修">
        <template #cell="{ record }">
          {{ record.isNeedRepair ? '是' : '否' }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="保养状态"
        fixed="right"
      >
        <template #cell="{ record }">
          <div class="repair-state">
            <div
              class="cycle"
              :class="
                record.maintainState === 1
                  ? 'waitJob-cycle'
                  : record.maintainState === 2
                  ? 'waitRepair-cycle'
                  : record.maintainState === 3
                  ? 'running-cycle'
                  : 'finish-cycle'
              "
            >
            </div>
            <div
              :class="
                record.maintainState === 1
                  ? 'waitJob'
                  : record.maintainState === 2
                  ? 'waitRepair'
                  : record.maintainState === 3
                  ? 'running'
                  : 'finish'
              "
              >{{
                record.maintainState === 1
                  ? '待派工'
                  : record.maintainState === 2
                  ? '待保养'
                  : record.maintainState === 3
                  ? '进行中'
                  : '已保养'
              }}</div
            >
          </div>
        </template>
      </a-table-column>
    </TableTurn>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import { GetMaintenanceEquipment } from '@/api/equipment-management/equipment-maintain-manager';
  // 表格配置
  const args = reactive({
    stripe: true,
    bordered: {
      headerCell: true
    }
  });
  const route = useRoute();
  const id = Number(route.query.id); // 设备id
  const getData = async (pageData?: any) => {
    const res: any = await GetMaintenanceEquipment({
      equipmentId: id,
      page: 1,
      size: -1
    });
    return Promise.resolve(res);
  };
</script>

<style scoped lang="less">
  .maintenance-record {
  }
</style>
